<template>
  <div class="collection">
    <div class="collection_wrap">
      <slide>
        <div class="collection_item">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/advent/banner.jpg" alt="">
          <div class="collection_item_right">
            <div>我他丫的就是标题我他丫的就是标题我他丫的就是标题</div>
            <div>￥138</div>
          </div>
        </div>
      </slide>
    </div>
    <div class="collection_wrap">
      <slide>
        <div class="collection_item">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/advent/banner.jpg" alt="">
          <div class="collection_item_right">
            <div>我他丫的就是标题我他丫的就是标题我他丫的就是标题</div>
            <div>￥138</div>
          </div>
        </div>
      </slide>
    </div>
    <div class="collection_wrap">
      <slide>
        <div class="collection_item">
          <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/advent/banner.jpg" alt="">
          <div class="collection_item_right">
            <div>我他丫的就是标题我他丫的就是标题我他丫的就是标题</div>
            <div>￥138</div>
          </div>
        </div>
      </slide>
    </div>
  </div>
</template>

<script>

import slide from '@/components/slide';
export default {
 name:'collection',
 components:{
   slide
 },
 mounted() {

 },
}
</script>

<style scoped>
  .collection{
    width:100%;
    height: 100%;
    background: #eee;
  }
  .collection_wrap{
    border-bottom: 1px solid #eee;
  }
  .collection_item{
    width:100%;
    height: 100%;
    display: flex;
    align-items: center;
  }
  .collection_item>img{
    height: 80px;
    width: 80px;
    margin-left:20px;
    margin-right: 30px;
  }
  .collection_item_right{
    height: 80px;
  }
  .collection_item_right>div:nth-child(1){
    text-overflow: ellipsis;
    width:200px;
    white-space:nowrap;
    overflow: hidden;
  }
  .collection_item_right>div:nth-child(2){
    margin-top:10px;
    color:red;
  }
</style>
